<template>
  <div>
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      shape="round"
      ref="input"
      @input="inputGet"
    />
    <!-- 热词部分 -->
    <div class="search_wrap" v-if="details.length == 0">
      <div class="hot_title">热门搜索</div>
      <div class="hot_name_wrap">
        <span
          class="hot_item"
          v-for="(obj, index) in hotkeys"
          :key="index"
          @click="fn(obj.first)"
          >{{ obj.first }}</span
        >
      </div>
    </div>
    <!-- 详细搜索信息 -->
    <div class="search_wrap" v-else>
      <div class="hot_title">最佳匹配</div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- <van-cell
          v-for="obj in details"
          :key="obj.id"
          center
          :title="obj.name"
          :label="obj.al.name + ' - ' + obj.name"
        >
          <template #right-icon>
            <van-icon name="play-circle-o" size="0.7rem" />
          </template>
        </van-cell> -->
        <songItem
          v-for="obj in details"
          :key="obj.id"
          :id="obj.id"
          :title="obj.name"
          :author="obj.al.name"
        ></songItem>
      </van-list>
    </div>
  </div>
</template>

<script>
import songItem from "../../components/songItem.vue";
import { hotkeysAPI, detailsAPI } from "@/api/index";
export default {
  components: {
    songItem,
  },
  data() {
    return {
      loading: false,
      finished: false,
      page: 1,
      value: "",
      hotkeys: [],
      details: [],
      timer: null,
    };
  },
  async created() {
    const res1 = await hotkeysAPI();
    this.hotkeys = res1.data.result.hots;
  },
  methods: {
    //点击搜索热词
    async fn(value) {
      this.finished = false;
      this.page = 1;
      this.value = value;
      let res = await this.getData();
      this.details = res.data.result.songs ? res.data.result.songs : [];
    },
    //封装获取数据
    async getData() {
      return await detailsAPI({
        keywords: this.value,
        limit: 20,
        offset: (this.page - 1) * 20,
      });
    },
    //输入框内容改变触发
    async inputGet() {
      if (this.value.length == 0) {
        return;
      }
      this.page = 1;
      this.finished = false;
      //设置防抖
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(async () => {
        this.$toast.loading({
          message: "加载中...",
          forbidClick: true,
          duration: 0,
        });
        let res = await this.getData();
        this.details = res.data.result.songs ? res.data.result.songs : [];
        this.$toast.success({
          message: "成功",
        });
      }, 500);
    },
    //当页面碰到底部加载更多
    async onLoad() {
      //偏移量加1
      this.page++;
      let res = await this.getData();
      if (res.data.result.songs === undefined) {
        this.finished = true;
        this.loading = false;
        return;
      }
      this.details = [...this.details, ...res.data.result.songs];
      if (res.data.result.songCount === this.details.length) {
        this.finished = true;
        this.loading = false;
        return;
      }
      this.loading = false;
    },
  },
};
</script>

<style scoped>
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}
</style>
